<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '报修记录',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <view class="content">
    <template v-if="dataList.length > 0">
      <wd-card v-for="(item, index) in dataList" :key="index">
        <view @click="() => goDetail(item)">
          <template #title>
            <view class="topBox">
              <view>{{ item.name }}</view>
              <view>{{ item.time }}</view>
            </view>
          </template>
          <view class="allInfo">
            <view class="item">
              <view class="mr-[20upx]">宿舍:</view>
              <view>{{ item.cause }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">保修设施:</view>
              <view>{{ item.time1 }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">设施类型:</view>
              <view>{{ item.time2 }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">问题描述:</view>
              <view>{{ item.hostel }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">解决日期:</view>
              <view>{{ item.time3 }}</view>
            </view>
          </view>
          <view class="text-right">
            <view class="btnBox" :class="{ btn1: item.status == 1, btn2: item.status == 0 }">
              {{ item.status == 1 ? '已解决' : '已解决' }}
            </view>
          </view>
        </view>
      </wd-card>
    </template>
    <wd-status-tip v-else image="search" tip="暂无数据" />
    <view class="imgAdd" @click="goAdd">
      <wd-img :width="50" :height="50" :src="addImg" />
    </view>
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import addImg from '@/static/add.png'

defineOptions({
  name: 'Repair',
})

const scrollTop = ref(0)
const dataList = ref([
  {
    name: 'test',
    time: '2024-08-10',
    cause: 'test',
    time1: '2024-08-10',
    time2: '2024-08-10',
    hostel: 'test',
    time3: '2024-08-10',
    time4: '2024-08-10',
    status: 0,
  },
])

onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const goDetail = (item) => {
  uni.navigateTo({
    url: '/pages/staff/repair/operate',
  })
}
const goAdd = () => {
  uni.navigateTo({
    url: '/pages/staff/repair/operate',
  })
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f1f1f1;
  min-height: 100vh;
  padding: 30upx 0upx;
  .topBox {
    display: flex;
    font-size: 32upx;
    color: black;
    justify-content: space-between;
    align-items: center;
  }
  .allInfo {
    .item {
      display: flex;
      align-items: center;
      line-height: 50upx;
    }
  }
  .btnBox {
    padding: 5upx 10upx;
    display: inline-block;
  }
  .btn1 {
    border: 1px solid #cf8428;
    color: #cf8428;
    border-radius: 10upx;
  }
  .btn2 {
    border: 1px solid #75c514;
    color: #75c514;
    border-radius: 10upx;
  }
  .imgAdd {
    position: fixed;
    bottom: 40upx;
    right: 30upx;
    z-index: 999;
  }
}
</style>
